// 短视频播放页面

const app = getApp()

// https://res.mhblog.cn/douyin/video/202112/v20211208183007MZmploYvvpOYJPq9n.mp4

import {
  getSwiperList,
} from '../../api/douyin'

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 当前播放视频的ID
    activeId: 0,
    // 视频是否正在播放中
    isPlaying: false,
    // 视频context
    videoContexts: [],

    // 搜索项
    search: {
      direction: 'down', // up.向上搜索 down.向下搜索
      minpage: 0, // 最小ID
      maxpage: 0, // 最大ID
      limit: 15, // 搜索长度
      talent_id: 0, // 达人ID
      label_type: 'all', // 标签
      labels: [], // 标签
      order: '', // 排序方式
    },

    // list参数
    list: [], // 当前视频列表
    currentIdx: 0, // 当前视频列表中播放视频的下标
    prevHasMore: true, // 前方是否有视频
    nextHasMore: true, // 后方是否有视频
    prevItemCount: 0, // 前方视频数量
    nextItemCount: 0, // 后方视频数量

    // swiperItem参数
    swList: [], // 当前 swiperItem 的 数据
    swiperCurrentIdx: 0, // 当前 swiperItem 的 index
    swiperLastIdx: 0, // 上个 swiperItem 的 index

    // 是否开启视频播放调试模式
    isTurnOnDebugMode: true,

    // 视频是否出现了缓冲
    isVideoWaiting: false,

    // 页面选项显示隐藏
    pageshow: true,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 初始化页面样式
    this.onPageInit()
    // 初始化项目数据
    this.onDataInit()
  },

  // onReady(e) {
  //   const query = wx.createSelectorQuery()
  //   query.select('#bottom_control').boundingClientRect(res => {
  //     console.log('bottom_control', res)
  //   }).exec()
  // },

  // ##########################################################################################

  // 初始化页面样式
  onPageInit() {
    // 系统屏幕位置信息
    const systemInfo = wx.getSystemInfoSync()
    // console.log('systemInfo', systemInfo)

    // 胶囊位置信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
    // console.log('menuButtonInfo', menuButtonInfo)

    // 单位间距（胶囊距屏幕右侧的距离）
    const dp = systemInfo.screenWidth - menuButtonInfo.right
    this.setData({
      dp,
    })

    this.setData({
      // 滑动视频的高度
      itemHeight: systemInfo.screenHeight - 80,
      // 弹出层的高度 屏幕高度减头部高度
      // popupHeight: systemInfo.screenHeight - menuButtonInfo.bottom,
    })
  },

  // ##########################################################################################

  // 初始化项目数据
  async onDataInit() {
    // 第一步：根据视频列表传过来的搜索选项去加载初始视频数据
    await this.onGetResourceInit()

    // 第二步：设置swiper初始格式
    this.onSetSwiperInit()

    // 设置当前页面信息
    this.onSetPageItemInfo()
  },

  /**
   * 根据搜索项去加载初始视频数据
   * @param search 搜索条件
   * @result prevItemCount 上方视频数量
   * @result nextItemCount 下方视频数量
   * @result currentIdx 当前视频坐标
   * @result list 短视频列表
   * @result nextHasMore 下方是否有视频
   */
  async onGetResourceInit() {
    // 第一步：加载本页视频
    const dataSwiperPlay = wx.getStorageSync("dataSwiperPlay")
    console.log('onGetResourceInit', dataSwiperPlay)
    this.data.search.direction = 'down'
    this.data.search.minpage = dataSwiperPlay.page
    this.data.search.maxpage = dataSwiperPlay.page
    this.data.search.limit = dataSwiperPlay.limit
    this.data.search.order = dataSwiperPlay.order
    this.data.search.label_type = dataSwiperPlay.label_type
    this.data.search.labels = dataSwiperPlay.labels
    this.data.search.talent_id = dataSwiperPlay.talent_id
    this.data.activeId = dataSwiperPlay.videoId // 加载当前视频ID
    this.data.prevHasMore = dataSwiperPlay.page != 1 // 如果是第一页，直接标注上方没有数据了
    // 网络请求获取数据
    const res = await getSwiperList(this.data.search)
    let isFindItemId = false
    if (res.status === 200) {
      const count1 = res.data.list.length
      const currentlist1 = res.data.list
      if (count1) {
        this.data.prevItemCount = -1
        this.data.nextItemCount = count1
        for (let i = 0; i < currentlist1.length; i++) {
          this.data.list.push(currentlist1[i])
          if (!isFindItemId) {
            this.data.prevItemCount++
            this.data.nextItemCount--
          }
          if (this.data.activeId == currentlist1[i].id) {
            this.data.currentIdx = i
            isFindItemId = true
          }
        }
      } else {
        this.data.nextHasMore = false
      }
      // 如果没有找到当前需要的视频
      if (!isFindItemId) {
        this.data.activeId = currentlist1[0].id
        wx.showModal({
          title: '没有找到ID为' + this.data.activeId + '的视频',
          content: '当前播放的视频是初载列表中的首条视频',
          showCancel: false,
          confirmText: '返回',
          complete: (res) => {
            if (res.confirm)
              wx.navigateBack()
          }
        })
      }
    }

    // 第二步：加载下一页视频
    this.data.search.direction = 'down'
    this.data.search.maxpage++
    // 网络请求获取数据
    const resNext = await getSwiperList(this.data.search)
    if (resNext.status === 200) {
      const count2 = resNext.data.list.length
      const currentlist2 = resNext.data.list
      if (count2) {
        for (let i = 0; i < currentlist2.length; i++)
          this.data.list.push(currentlist2[i])
        this.data.nextItemCount += count2
      } else {
        this.data.nextHasMore = false
      }
    }

    // 第二步：加载上一页视频
    if (this.data.prevHasMore) {
      this.data.search.direction = 'up'
      this.data.search.minpage--
      // 网络请求获取数据
      const resPre = await getSwiperList(this.data.search)
      if (resPre.status === 200) {
        const count3 = resPre.data.list.length
        const currentlist3 = resPre.data.list
        if (count3) {
          for (let i = currentlist3.length - 1; i >= 0; i--)
            this.data.list.unshift(currentlist3[i])
          this.data.currentIdx += count3
          this.data.prevItemCount += count3
        } else {
          this.data.prevHasMore = false
        }
      }
    }

    return true
  },

  // 设置swiper初始格式
  onSetSwiperInit() {
    // 设置swiper context
    this.data.videoContexts = [wx.createVideoContext('video0', this), wx.createVideoContext('video1', this), wx.createVideoContext('video2', this)]
    // 设置swiper列表
    const idx = this.data.currentIdx
    const list = this.data.list
    this.setData({
      list, // 视频列表
      swList: [this.addMark(idx, list), this.addMark(idx + 1, list), this.addMark(idx - 1, list)], // swiperItem 列表
    })

    // console.log('idx', idx)
    // console.log('list', list)
    // console.log('videoContexts', this.data.videoContexts)
    // console.log('swList', this.data.swList)
    // console.log('swiperCurrentIdx', this.data.swiperCurrentIdx)
    // console.log('currentIdx', this.data.currentIdx)

    // 设置当前视频信息
    if (this.data.isTurnOnDebugMode) {
      this.setData({
        swiperLastIdx: this.data.swiperLastIdx,
        swiperCurrentIdx: this.data.swiperCurrentIdx,
        activeId: this.data.activeId,

        listLength: this.data.list.length, // 视频长度
        currentIdx: this.data.currentIdx, // 当前视频index
        prevItemCount: this.data.prevItemCount,
        nextItemCount: this.data.nextItemCount,
      })
    }

    // 播放当前视频
    this.playCurrent(this.data.swiperCurrentIdx, this.data.currentIdx)
  },

  // ##########################################################################################







  // ##########################################################################################
  // # 视频切换 之 Swiper触发方法
  // ##########################################################################################

  // current 改变时会触发 - 只有当swiper项改变时才会触发，item一定会改变
  bindchange(e) {
    // 在滑动视频切换结束时：

    // 第1步：获取 当前播放的视频 在swiper插件中的坐标，和 上一个播放的视频 的坐标
    // 获取 当前视频坐标 和 上一视频坐标，是为了判断视频的滑动方向
    const swiperLastIdx = this.data.swiperCurrentIdx // 切换完成时，前一个Item的坐标（播放下一个视频就是上一个视频的坐标，放下上一个视频就是下一个视频的坐标，上个当前视频的index就是现在的上个index）
    const swiperCurrentIdx = e.detail.current // 切换完成时，当前Item的坐标（swiper发生改变时，获取到当前视频index和当前视频ID）

    // 第2步：判断 是怎么切到当前视频的。有切换到下一个视频，切换到上一个视频，和不变这三种情况
    const diff = swiperCurrentIdx - swiperLastIdx // 获取swiper滚轮的切换方式的数值
    // if (diff == 0) return false // 未切换则不做任何操作

    // 第3步：更新当前视频的基本信息
    this.data.swiperCurrentIdx = swiperCurrentIdx // 更新当前视频index
    this.data.activeId = Number(e.detail.currentItemId) // 更新当前视频ID

    // 调试：如果开启了视频调试模式，把调试信息打到屏幕上，并且输出到控制台
    if (this.data.isTurnOnDebugMode) {
      this.setData({
        swiperLastIdx: this.data.swiperLastIdx,
        swiperCurrentIdx: this.data.swiperCurrentIdx,
        activeId: this.data.activeId,
      })
    }

    // 第4步：处理两种不同切换情况下的视频展示
    // 向下切换，划到下一个视频
    if (diff === 1 || diff === -2)
      this.handleChangeDown(swiperCurrentIdx)
    // 向上切换，划到上一个视频
    if (diff === -1 || diff === 2)
      this.handleChangeUp(swiperCurrentIdx)

    // 第5步：播放当前视频
    this.playCurrent(swiperCurrentIdx, this.data.currentIdx)

    // 设置当前页面信息
    this.onSetPageItemInfo()

    // 调试：如果开启了视频调试模式，把调试信息打到屏幕上，并且输出到控制台
    if (this.data.isTurnOnDebugMode) {
      this.setData({
        listLength: this.data.list.length, // 视频长度
        currentIdx: this.data.currentIdx, // 当前视频index
        prevItemCount: this.data.prevItemCount,
        nextItemCount: this.data.nextItemCount,
        // 播放下一个视频：视频向下滑动，手势上划。播放上一个视频：频向上滑动，手势下划
        videotip1: (diff === 1 || diff === -2) ? 'N' : 'P',
      })
    }
  },

  // 触发向下切换
  handleChangeDown(swiperCurrentIdx) {
    // 第1步：滑到下一个视频后，更新前后视频数量状态
    // 得到当前需要处理的当前视频在整体列表中的坐标，整体视频数量、和swiper的context
    // 这里的技术针对的是视频整体，和swiper没有关系
    this.data.currentIdx++
    this.data.prevItemCount++
    this.data.nextItemCount--
    const currentIdx = this.data.currentIdx
    const listLength = this.data.list.length
    let swList = this.data.swList

    // 第2步：当前视频处理完成后，提前把下个要播放的视频数据布置好
    // 下个视频的swiper index
    const nextSwiperIndex = (swiperCurrentIdx + 1) % 3
    // 下一个视频
    swList[nextSwiperIndex] = this.addMark(currentIdx + 1, this.data.list)

    this.setData({
      swList,
    })
  },

  // 触发向上切换
  handleChangeUp(swiperCurrentIdx) {
    // 第1步：滑到上一个视频后，更新前后视频数量状态
    this.data.currentIdx--
    this.data.prevItemCount--
    this.data.nextItemCount++
    const currentIdx = this.data.currentIdx
    const listLength = this.data.list.length
    let swList = this.data.swList

    // 第2步：当前视频处理完成后，提前把下个要播放的视频数据布置好
    // 上个视频的swiper index
    const nextSwiperIndex = (swiperCurrentIdx - 1) == -1 ? 2 : (swiperCurrentIdx - 1)
    // 下一个视频
    swList[nextSwiperIndex] = this.addMark(currentIdx - 1, this.data.list)

    this.setData({
      swList,
    })
  },

  // ##########################################################################################
  // # 视频切换 之 Swiper动画结束
  // ##########################################################################################

  // 动画结束时会触发 - swiper item不一定改变
  animationfinish(e) {
    // console.log('bindchange', e)
    this.onGetFinishResource()
  },

  // 动画结束时加载头尾视频
  async onGetFinishResource() {
    // 模块1：滑动到头，或者滑动到尾时，加载视频

    // 获取尾部视频
    if (this.data.nextItemCount <= 3 && this.data.nextHasMore === true)
      await this.onGetResourceFooter()

    // 获取头部视频
    if (this.data.prevItemCount <= 3 && this.data.prevHasMore === true)
      await this.onGetResourceHeader()

    return true
  },

  // 获取头部视频
  async onGetResourceHeader() {
    this.data.search.direction = 'up'
    this.data.search.minpage--
    if (this.data.search.minpage == 0) {
      this.setData({
        prevHasMore: false,
      })
      return false
    }
    getSwiperList(this.data.search)
      .then(res => {
        if (res.status === 200) {
          const count = res.data.list.length
          const list = res.data.list
          if (count) {
            for (let i = list.length - 1; i >= 0; i--) {
              this.data.list.unshift(list[i])
            }
            this.setData({
              list: this.data.list,
              swiperCurrentIdx: this.data.swiperCurrentIdx + count,
              swiperLastIdx: this.data.swiperLastIdx + count,
              currentIdx: this.data.currentIdx + count,
            })
            this.data.prevItemCount += count
          } else {
            this.data.prevHasMore = false
          }
          if (this.data.isTurnOnDebugMode) {
            this.setData({
              listLength: this.data.list.length,
              currentIdx: this.data.currentIdx,
              prevItemCount: this.data.prevItemCount,
              nextItemCount: this.data.nextItemCount,
            })
          }
        }
      })
      .catch(err => {
        return false
      })
      .finally(() => {
        return true
      })
  },

  // 获取尾部视频
  async onGetResourceFooter() {
    this.data.search.direction = 'down'
    this.data.search.maxpage++
    getSwiperList(this.data.search)
      .then(res => {
        if (res.status === 200) {
          const count = res.data.list.length
          const list = res.data.list
          if (count) {
            for (let i = 0; i < list.length; i++)
              this.data.list.push(list[i])
            this.setData({
              list: this.data.list,
            })
            this.data.nextItemCount += count
          } else {
            this.data.nextHasMore = false
          }
          if (this.data.isTurnOnDebugMode) {
            this.setData({
              listLength: this.data.list.length,
              currentIdx: this.data.currentIdx,
              prevItemCount: this.data.prevItemCount,
              nextItemCount: this.data.nextItemCount,
            })
          }
        }
      })
      .catch(err => {
        return false
      })
      .finally(() => {
        return true
      })
  },

  // ##########################################################################################





  // ##########################################################################################
  // # 
  // ##########################################################################################

  // 给视频内容添加标记
  addMark(index, list) {
    let item = list[index]
    // 空内容
    if (item == undefined)
      return {
        itemtype: 'empty'
      }
    // 短视频
    list[index].itemtype = 'shortvideo'
    return list[index]
  },

  // 播放当前视频
  playCurrent(current, idx) {
    // this.data.videoContexts.forEach((ctx, index) => {
    //   index !== current ? ctx.stop() : ctx.play()
    // })
    this.data.videoContexts[0].stop()
    this.data.videoContexts[1].stop()
    this.data.videoContexts[2].stop()
    this.setData({
      isPlaying: false,
    })

    if (idx >= 0 && idx < this.data.list.length) {
      this.data.videoContexts[current].play()
      this.setData({
        isPlaying: true, // 正在播放
      })
    }
  },

  // 点击视频 切换暂停和播放方法
  onClickVideo(e) {
    const ctx = this.data.videoContexts[this.data.swiperCurrentIdx]
    let isPlaying = this.data.isPlaying

    if (isPlaying) {
      ctx.pause()
      isPlaying = false
    } else {
      ctx.play()
      isPlaying = true
    }

    this.setData({
      isPlaying
    })
  },

  // 设置当前页面信息
  onSetPageItemInfo() {
    const itemInfo = this.data.list[this.data.currentIdx]
    // console.log('itemInfo', itemInfo)
    if (itemInfo == undefined)
      return false
    this.setData({
      content: {
        id: itemInfo.id,
        author: itemInfo.author,
        author_id: itemInfo.author_id,
        title: itemInfo.title,
        avatar: itemInfo.avatar,
        comment_count: itemInfo.comment_count,
        digg_count: itemInfo.digg_count,
        item_id: itemInfo.item_id,
        publish_time: itemInfo.publish_time,
        video_duration: itemInfo.video_duration,
        share_count: itemInfo.share_count,
        share_link: itemInfo.share_link,
      },
    })
  },

  // ##################################################





  // ##################################################
  // # 视频 操作方法
  // ##################################################

  bindoptshow(e) {
    this.setData({
      pageshow: e.detail
    })
  },

  // 开始/继续播放时触发
  onPlay(e) {
    // let index = e.detail.swiperCurrentIdx
    // this.data.activeId = e.detail.activeId
    // this.data.activeTimeStamp = e.timeStamp
    // this.data.video = this.data.videoList[index]
    // this.setData({
    //   video: this.data.video
    // })
    // console.debug(this.data.video)
    this.videolog(e)
    // this.data.videoList.forEach(function (ctx, index) {
    //   ctx.seek(0) //重新开始播放
    //   index !== current ? ctx.pause() : ctx.play();
    // })
  },

  // 暂停播放时触发
  onPause(e) {
    this.videolog(e)
  },
  // 播放到末尾时触发
  onEnded(e) {
    const swiperCurrentIdx = e.target.dataset.index
    const activeId = e.target.dataset.id
    // 视频播放到末尾时自动从头播放，这里暂不处理
    // 后续记录完播率时用
  },

  // 视频出现缓冲时触发
  onWaiting(e) {
    console.log('onWaiting', e)
    this.setData({
      isVideoWaiting: true,
    })
  },

  // 视频播放出错时触发
  onError(e) {
    app.showToast("视频播放出错时触发onError")
    this.videolog(e)
  },
  // 播放进度变化时触发
  onTimeUpdate(e) {
    // 只要视频处于播放状态，则一直触发播放进度变化状态
  },

  // 加载进度变化时触发，只支持一段加载
  onProgress(e) {
    // 只要当前视频没有加载完成，则一直触发此家在进度变化方法
  },
  // 视频元数据加载完成时触发
  onLoadedMetaData(e) {
    // 会自动加载此条视频 和 与此条视频相邻的两条视频，加载完成时返回加载完毕的视频信息
    // console.log('视频元数据加载完成时触发onLoadedMetaData')
    this.videolog(e)
  },

  // 打印视频日志
  videolog(e) {
    const swiperCurrentIdx = e.target.dataset.index
    const activeId = e.target.dataset.id
    // console.log('banana', {
    //   type: e.type,
    //   swiperCurrentIdx,
    //   activeId,
    //   e,
    // })
  },

  // ##########################################################################################










  // ##########################################################################################
  // # 操作按钮
  // ##########################################################################################

  // 底部操作按钮
  onBottomControl(e) {
    const type = e.currentTarget.dataset.type
    switch (type) {
      case 'label':
        this.openLabelsetupPopup()
        break
      case 'category':
        app.showToast('category')
        break
      case 'func':
        app.showToast('func')
        break
    }
  },

  // 打开标签设置窗口
  openLabelsetupPopup() {
    this.selectComponent('#labelsetup').onPopupOpen()
  },

  // 打开标签编辑窗口
  openLabeleditPopup() {
    this.selectComponent('#labeledit').onPopupOpen()
  },

  // ##########################################################################################

})